import React, { useState, useEffect } from "react";
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

// componentWillUnmount 生命周期函数（组件将要被卸载时执行）

function Index() {
    useEffect(() => { // *useEffect解绑副作用
        console.log(`useEffect=>来了，老弟！Index页面`);
        return () => { //! 解绑操作
            console.log(`走了，老弟！Index页面`);
        }
    }, []); //![]: 表示当Index被销毁/被解绑才会执行；
    return <h2>JSPang.com</h2>
}

function List() {
    useEffect(() => {
        console.log(`useEffect=>来了，老弟！Page页面`);
        return () => {
            console.log(`走了，老弟！Page页面`);
        }
    }, []);
    return <h2>List-Page</h2>
}

function Example() {
    const [count, setCount] = useState(0); // 数组结构
    useEffect(() => {
        console.log(`useEffect=>You clicked ${count} times`);

        return () => {
            console.log("#######################");
        }
    }, []); //![count] 当状态值发生变化时，我们才进行解绑/执行解绑副作用函数
    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={() => { setCount(count + 1) }}>click me</button>
            <BrowserRouter>
                <ul>
                    <li><Link to="/">首页</Link></li>
                    <li><Link to="/list/">列表</Link></li>
                </ul>
                <Routes>
                    <Route path="/" exact element={<Index />} />
                    <Route path="/list/" element={<List />} />
                </Routes>
            </BrowserRouter>
        </div>
    )
}

export default Example;





